<template>
	<div class="login-container">
		<!-- 登录 -->
		<van-nav-bar title="登录" left-text="返回" right-text="注册" left-arrow right-arrow @click-left="back()"
			@click-right="register()" />

		<div class="input-container">
			<!-- 输入模块 -->
			<van-cell-group inset>
				<form>
					<!-- 账号名 / 电话号 -->
					<van-field v-model="account" label="账号/电话" />
					<!-- 输入密码 -->
					<van-field v-model="password" type="password" label="密码" autocomplete="off" />
				</form>
			</van-cell-group>
		</div>

		<div class="btn-container">
			<van-button type="primary" block @click="login()">登录</van-button>
		</div>
	</div>
</template>

<script>
	import {
		showToast
	} from 'vant'
	export default {
		data() {
			return {
				"account": "",
				"password": ""
			}
		},
		methods: {
			back() {
				this.$router.back()
			},
			register() {
				this.$router.push("/register")
			},
			login() {
				let that = this
				console.log("进行 登录 请求");
				if (this.account === "") {
					showToast("请输入账号/电话")
					return
				}
				if (this.password === "") {
					showToast("请输入密码")
					return
				}
				this.$http.login({
						"account": this.account,
						"password": this.password
					})
					.then(function(resp) {
						console.log(resp.data);
						that.$store.commit('login', resp.data.data)
						that.user = that.$store.getters.userInfo
						that.loginSucceed()
					})
					.catch(function(e) {
						console.log(e);
					})
					.then(function() {
						console.log("隐藏loading");
						var user = that.$store.getters.userInfo
						console.log(user);
					})
			},
			loginSucceed() {
				// 直接返回
				this.$router.back()
			}
		}
	}
</script>

<style lang="scss">
	.login-container {
		background-color: #f0f0f0;
		height: 100%;
	}

	.input-container {
		margin-top: 40px;
	}

	.btn-container {
		margin-top: 40px;
		margin-left: 20px;
		margin-right: 20px;
	}
</style>